<template>
  <div v-show="props.compType === 'formImage'">
    <MyTabs>
      <template #1>
        <el-form-item label="ID">
          <el-tooltip
            effect="dark"
            content="请注意handleChangeField,ID的修改可能会导致该组件相关事件失效！"
            placement="left"
          >
            <el-input v-model="props.id" />
          </el-tooltip>
        </el-form-item>
        <AssociatedFieldKey :props="props" />
        <el-form-item label="标题">
          <el-input v-model="props.label" />
        </el-form-item>

        <el-form-item label="默认图片">
          <ImgUpload
            @sent-uploaded-res="onSentUploadedRes"
            @preview-url="onPreviewUrl"
          />
        </el-form-item>

        <el-form-item label="开启预览">
          <el-switch v-model="props.preview" />
        </el-form-item>
      </template>
      <template #2>
        <el-form-item label="栅格间隔">
          <el-input-number v-model="props.gutter" :min="0" />
        </el-form-item>
        <el-form-item label="标签宽度">
          <el-input-number v-model="props.labelWidth" :min="1" :max="200" />
        </el-form-item>
      </template>
      <template #3>
        <el-form-item label="显示标签">
          <el-switch v-model="props.showLabel" />
        </el-form-item>
        <el-form-item label="图片高度">
          <el-input-number v-model="props.height" :step="10" />
        </el-form-item>
      </template>
    </MyTabs>
  </div>
</template>
<script>
import ImgUpload from "../../component/img-upload.vue";
import MyTabs from "../../component/tabs";
import AssociatedFieldKey from "../../component/associatedFieldKey";

export default {
  name: "FormImageConfig",
  components: {
    MyTabs,
    AssociatedFieldKey,
    ImgUpload,
  },
  props: ["props", "getFormId"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    onPreviewUrl(url) {
      this.props["previewSrc"] = url;
    },
    onSentUploadedRes(res) {
      this.props.value = res.data;
    },
  },
};
</script>
